<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="仓库名称">
          <el-input v-model="storehouseName" />
        </el-form-item>
        <el-form-item label="材料名称">
          <el-input v-model="materialName" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:name="{row}">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:recvTime="{row: {recvTime}}">
          {{ dateFormat(recvTime) }}
        </template>
        <template v-slot:status="{row}">
          <a class="com-link" style="text-decoration:underline;" @click="getWorkflowDetail(row)">{{ row.status | formateFlowStatus }}</a>
        </template>
        <template v-slot:returnTime="{row: {returnTime}}">
          {{ dateFormat(returnTime) }}
        </template>
        <template v-slot:createTime="{row: {createTime}}">
          {{ dateFormat(createTime) }}
        </template>
        <template v-slot:options="{row}">
          <el-button type="primary" @click="detail(row)">详情</el-button>
        </template>

      </com-table>
    </div>
    <addRecyclableMaterialBackForm
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="detailData"
    />
  </div>
</template>

<script>
import { getTurnoverReturnFinishInfoList } from '@/api/materialsAndLowValueConsumables'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { workflowStatus } from '@/utils/dicData'
import addRecyclableMaterialBackForm from './addRecyclableMaterialBackForm.vue'
export default {
  name: 'MaterialRequisitionFormInfo',
  components: {
    addRecyclableMaterialBackForm
  },
  data() {
    return {
      storehouseName: '',
      materialName: '',
      getDictName,
      workflowStatus,

      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'edit',
      detailData: {},
      columns: [
        {
          label: '仓库名称',
          prop: 'storehouseName',
          width: '250'
        },
        /* {
          label: '归还单编号',
          prop: 'returnNumber',
          width: '180'
        },*/
        {
          label: '归还时间',
          prop: 'returnTime',
          slot: 'returnTime',
          width: '100'
        },
        {
          label: '接收人',
          prop: 'recipient'
        },
        {
          label: '归还人',
          prop: 'returnee'
        },
        {
          label: '归还单位',
          prop: 'supplierName'
        },
        /* {
          label: '材料编号',
          prop: 'materialNumber',
          width: '180'
        },*/
        {
          label: '材料名称',
          prop: 'materialName',
          width: '150'
        },
        {
          label: '规格',
          prop: 'materialSpecification',
          width: '130'
        },
        {
          label: '单位',
          prop: 'materialUnit'
        },
        {
          label: '材料归还数量',
          prop: 'materialReturnCount'
        },
        {
          label: '差额',
          prop: 'materialDifference'
        },
        {
          label: '编制人',
          prop: 'founderName'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '100',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    detail(data) {
      this.detailData = { ...data, id: data.turnoverReturnInfoId }
      this.showModal = true
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        storehouseName: this.storehouseName,
        materialName: this.materialName
      }
      getTurnoverReturnFinishInfoList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },

    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.storehouseName = ''
      this.materialName = ''
    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}
</style>
